<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的采购</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" class="minWidth"> 
        <el-form :inline="true" :form="form">
            <el-form-item>
                <el-input clearable v-model="form.serachKey" placeholder="请输入商品名称" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSerach">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addEnterprise">发布</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="window.location.href = './Show.html'">我的采购</el-button>
                <el-badge :value="badge" :max="99" :hidden="badge == 0?true:false" class="item">
                    <el-button @click="window.location.href = './message.html'">消息</el-button>
                </el-badge>
            </el-form-item>
        </el-form>
 
        <el-table :data="tableData.slice((form.page-1)*form.limit,form.page*form.limit)" stripe border
            height="calc(100vh - 140px)" style="width: 100%" @expand-change="expand">
            <el-table-column align="center" label="" width="50" type="expand">
                <template v-slot="{row}">
					<el-table :data="row.orderData" border :header-cell-style="{ 'text-align': 'center' }"
						:cell-style="{ 'text-align': 'center' }" style="width: 97%;">
						<el-table-column  label="商品流水号" width="">
                            <template slot-scope="scope">
								{{scope.row.Group_Seek_Transaction_SerialNumber}}
							</template>
                        </el-table-column>
						<el-table-column label="商品名称" width="85" align="center">
							<template slot-scope="scope">
								<el-tooltip effect="dark" :content="scope.row.Article_Name" placement="top">
									<div class="text-ellipsis w-100">
										{{scope.row.Article_Name}}
                                    </div>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column prop="Quantity" label="交易量" width="85">
							<template slot-scope="scope">
								{{scope.row.Quantity}}{{scope.row.Unit}}
							</template>
						</el-table-column>
						<el-table-column prop="Amount" label="交易金额" width="85">
							<template slot-scope="scope">
								{{Number(scope.row.Amount)*Number(scope.row.Quantity)}}元
							</template>
						</el-table-column>
						<el-table-column prop="Collection_Amount" label="已付金额" width="85">
							<template slot-scope="scope">
								{{scope.row.Collection_Amount}}元
							</template>
						</el-table-column>
						<el-table-column prop="Collection_Amount" label="未付金额" width="85">
							<template slot-scope="scope">
								{{(Number(scope.row.Amount)*Number(scope.row.Quantity)-Number(scope.row.Collection_Amount)).toFixed(2)}}
							</template>
						</el-table-column>
						<el-table-column label="联系人" width="85">
							<template slot-scope="scope">
								<el-tooltip effect="dark" :content="scope.row.Seller_Contact" placement="top">
									<div class="text-ellipsis w-100">
										{{scope.row.Seller_Contact}}
                                    </div>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" effect="dark" prop="Enterprise_Name" label="对方企业"
							width="150"></el-table-column>
						<el-table-column width="100" label="操作">
							<template v-slot="{row}">
								<el-button @click="LookDetail($event,row)" size="mini"
									type="info">详情</el-button>
							</template>
						</el-table-column>
                        <!-- 第二个操作 -->
						<el-table-column prop="operate" label="操作" width="150">
							<template v-slot="{row}">
								<div class="flex justify-center">
									<el-button :loading="loading" v-if="row.Row_Status == '0'" @click="Inventory(row)" size="mini" 
										type="success">通过</el-button>
									<el-button :loading="loading" @click="Confirmcontract(row)" v-if="row.Row_Status == '1'" size="mini"
										type="success">确认合同</el-button>
									
									<el-button v-if="row.Row_Status=='4'&&row.Seller_Status=='4'||row.Row_Status=='6'&&row.Seller_Status=='4'" @click="goDetail($event,row)" size="mini" type="primary">付款详情</el-button>
									<el-button @click="RefuseProcurement(row)" :loading="loading" v-if="row.Row_Status == '0'"
										size="mini" type="danger">拒绝</el-button>
									<el-button :loading="loading" @click="ConfirmReceipt(row)" v-if="row.Row_Status == '5'" size="mini"
										type="warning">确认收货</el-button>
                                </div>
							</template>
						</el-table-column>

					</el-table>
                    <div v-if="Number(row.total)>0" class="flex justify-between">
						<div class="">
						</div>
						<el-pagination background @size-change="handleSizeChange1($event,row)"
							@current-change="handleCurrentChange1($event,row)" :current-page="Number(row.form.page)"
							:page-sizes="[1,5,10,20]" :page-size="Number(row.form.limit)"
							layout="total, sizes, prev, pager, next, jumper" :total="Number(row.total)">
						</el-pagination>
					</div>
				</template>


            </el-table-column>
            <el-table-column align="center" label="序号" width="50" type="index"></el-table-column>
            <el-table-column align="center" prop="Article_Name" label="商品名"></el-table-column>
            <el-table-column align="center" prop="Release_Type" label="状态" width="150">
                <template v-slot="{row}">
                    <el-tag v-if="row.Total_Quantity!=row.Acquisition_Quantity" type="danger" size="small">求购中</el-tag>
                    <el-tag v-else type="success" size="small">已收购足量</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Total_Quantity" label="需求总量"></el-table-column>
            <el-table-column align="center" prop="Starting_Quantity" label="起步量"></el-table-column>
            <el-table-column align="center" prop="Acquisition_Quantity" label="已收购量"></el-table-column>
            <el-table-column align="center" prop="Residue_Quantity" label="剩余需求量"></el-table-column>
            <el-table-column align="center" prop="Amount" label="预定金额"></el-table-column>
            <el-table-column align="center" prop="Unit" label="商品单位"></el-table-column>
            <el-table-column align="center" prop="Contacts" label="联系人"></el-table-column>
            <el-table-column align="center" prop="Enterprise_Name" label="企业名称">
                <template v-slot="{row}">
                    <div :title="row.Enterprise_Name" style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                        <span>{{row.Enterprise_Name}}</span>
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="操作" width="200">
                <template v-slot="{row}">
                    <div v-show="row.Enterprise_Info_SerialNumber==Enterprise_Info_SerialNumber">
                        <el-button v-if="row.Total_Quantity==row.Acquisition_Quantity" type="primary" v-if="true" size="small">取消需求</el-button>
                    </div>
                </template>
            </el-table-column> -->
        </el-table>
        <el-pagination background v-show="total > 0" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10,20,30,50]"
            :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
    <script type="text/javascript" src="../../../utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="./js/Procurementneeds.js"></script>
</body>

</html>